<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>{$Think.config.app_name}</title>
    {include file="public/header" /}
    <style>
        .topimg {
            width: 100%;
            height: 100%;
            position: abusolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 10px;
        }
        
        .user {
            height: 180px;
            margin: 10px;
            border-radius: 10px;
            background: -webkit-linear-gradient(#333, #000);
            /*box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);*/
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
            color: #fff;
            position: relative;
            margin-bottom: 20px;
        }
        
        .userBottom {
            position: absolute;
            left: 15px;
            bottom: 15px;
            right: 15px;
            font-size: 14px;
        }
        
        .userBottom>i {
            font-size: 16px;
        }
        
        .web_title {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        .tip {
            font-size: 10px;
            background-color: orangered;
            color: white;
            padding: 0px 5px;
            -webkit-border-radius: 3px;
            float: right;
            margin: 2px;
        }
        
        .searchInput {
            font-size: 16px;
        }
        
        .weui-flex-reset {
            background-color: transparent;
            margin: 5px;
            color: #333;
            border-radius: 0px;
        }
        
        .classifylist {
            background-color: white;
            margin: 10px;
            color: #333;
            border-radius: 10px;
        }
        
        .menu-title {
            font-size: 14px;
        }
    </style>
    <div class="vue_box" v-cloak>
        <div class="weui-search-bar" action="" method="get">
            <div class="weui-search-bar__form">
                <div class="weui-search-bar__box"> <i class="weui-icon-search"></i>

                    <input type="search" class="weui-search-bar__input searchInput" style="font-size:16px;" id="searchInput" placeholder="输入关键词搜索" value="" name="keyword">
                </div>
            </div>
            <div onclick="search()" style="display:inline-block;color:#333;margin-left: 10px;line-height: 28px;font-size:16px; white-space: nowrap;" id="searchCancel">搜索</div>
        </div>
        <div class="user">
            <div class="topimg"></div>
            <div class="userBottom">
                <div class="web_title">{$Think.config.app_name}</div>
            </div>
        </div>
        <div class="classifylist">
            <div class="weui-flex weui-flex-reset">
                <div class="weui-flex__item tabbar-item" where="" onclick="redirect(this)">
                    <div class="menu-icon"> <i style="color:#999;font-size:28px;" class="iconfont icon-apple"></i>

                    </div>
                    <div class="menu-title">测试</div>
                </div>
                <div class="weui-flex__item tabbar-item" where="" onclick="redirect(this)">
                    <div class="menu-icon"> <i style="color:#999;font-size:28px;" class="iconfont icon-apple"></i>

                    </div>
                    <div class="menu-title">测试</div>
                </div>
                <div class="weui-flex__item tabbar-item" where="" onclick="redirect(this)">
                    <div class="menu-icon"> <i style="color:#999;font-size:28px;" class="iconfont icon-apple"></i>

                    </div>
                    <div class="menu-title">测试</div>
                </div>
                <div class="weui-flex__item tabbar-item" where="" onclick="redirect(this)">
                    <div class="menu-icon"> <i style="color:#999;font-size:28px;" class="iconfont icon-apple"></i>

                    </div>
                    <div class="menu-title">测试</div>
                </div>
            </div>
        </div>
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__hd">测试列表</div>
            <div class="weui-panel__bd">
                <div class="weui-media-box weui-media-box_appmsg" v-for="(item,index) in testList" :key="index" onclick="redirect(this)">
                    <div class="weui-media-box__hd">
                        <img class="weui-media-box__thumb" src="" width="auto" height="100%" onerror="this.src='/static/img/none.png';">
                    </div>
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title">{{item.title}}</h4>

                        <p class="weui-media-box__desc">{{item.content}}</p>
                    </div>
                </div>
            </div>
            <div class="weui-panel__ft">
                <div class="weui-cell weui-cell_access weui-cell_link" onclick="redirect(this)">
                    <div class="weui-cell__bd">查看更多</div> <span class="weui-cell__ft"></span>

                </div>
            </div>
        </div>
    </div>{include file="public/footer" /}
    <script>
        VUE_APP = new Vue({
            el: ".vue_box",
            data: {
                testList: [{
                    id: 1,
                    title: "测试标题测试标题测试标题测试标题测试标题",
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    id: 1,
                    title: "测试标题测试标题测试标题测试标题测试标题",
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }, {
                    id: 1,
                    title: "测试标题测试标题测试标题测试标题测试标题",
                    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容"
                }],
                nomoredata: "数据加载中",
                //上面的参数不允许删除
            },
            created: function() {
                wx.ready(function() {});
                this.getList();
            },
            methods: {
                getList: function() {
                    // $.post("/admin/node/getList", {
                    //     node_module: this.node_module,
                    //     node_controller: this.node_controller,
                    //     node_action: this.node_action
                    // }, function (data, status) {
                    //     if (data.code != 200) {
                    //         if (data.url) {
                    //             location.replace(data.url);
                    //         }
                    //         _alert(data.msg);
                    //         app.nomoredata = data.msg;
                    //     } else {
                    //         if (data.data.list.length == 0) {
                    //             app.nomoredata = "没有更多数据了";
                    //         }
                    //         app.list = data.data.list;
                    //     }
                    // });
                },
            }
        });
    </script>
    </body>

</html>